<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="renderer" content="webkit" />
  <meta http-equiv="Cache-Control" content="no-transform" />
  <meta name="google" content="notranslate" />
  <meta name="format-detection" content="telephone=no,email=no" />
  <title>Document</title>
  <meta name="keywords" content="">
  <meta name="description" content="">
  <style>
  </style>
</head>

<body>
  <div class="address">
    <select name="provice" id="provice">
    </select>
    <select name="city" id="city">
    </select>
    <select name="area" id="area">
    </select>
  </div>

  <script>
    // 省市区的三级联动 
    var provices = ['河南省', '黑龙江省', '广东省'];
    var citys = [
      ['郑州市', '开封市', '商丘市', '许昌市'],
      ['哈尔滨市'],
      ['广州市']
    ];
    var areas = [
      [
        ['二七区', '金水区', '高新区'],
        ['龙亭区', '顺河回族区', '禹王台区'],
        ['梁园区', '睢阳区', '民权县'],
        ['禹州市', '魏都区', '长葛市'],
      ],
      [
        ['道里区', '南岗区', '道外区']
      ],
      [
        ['荔湾区', '越秀区', '海珠区']
      ]
    ];

    var _provices = document.getElementById('provice');
    var _citys = document.getElementById('city');
    var _areas = document.getElementById('area');
    var provice_str = '';

    // 省份初始化
    for (var i in provices) {
      provice_str += '<option value="' + i + '">' + provices[i] + '</option>';
    }
    _provices.innerHTML = provice_str;
    var _provicesVal = _provices.value;

    // 城市初始化
    var city_str_init = '';
    for (var i in citys[_provicesVal]) {
      city_str_init += '<option value="' + i + '">' + citys[_provicesVal][i] + '</option>';
    }
    _citys.innerHTML = city_str_init;
    var _citysVal = _citys.value;

    // 区域初始化
    var area_str_init = '';
    for (var i in areas[_provicesVal][_citysVal]) {
      area_str_init += '<option value="' + i + '">' + areas[_provicesVal][_citysVal][i] + '</option>';
    }
    _areas.innerHTML = area_str_init;

    // 监听省下拉菜单的变化
    _provices.onchange = function () {
      _provicesVal = _provices.value;

      // 城市重加载
      var city_str = '';
      for (var i in citys[_provicesVal]) {
        city_str += '<option value="' + i + '">' + citys[_provicesVal][i] + '</option>';
      }
      _citys.innerHTML = city_str;

      _citysVal = _citys.value;

      // 区域重加载
      var area_str = '';
      for (var j in areas[_provicesVal][_citysVal]) {
        area_str += '<option value="' + j + '">' + areas[_provicesVal][_citysVal][j] + '</option>';
      }
      _areas.innerHTML = area_str;
    }

    // 监听市下拉菜单的变化
    _citys.onchange = function () {
      _citysVal = _citys.value;
      var area_str = '';
      for (var i in areas[_provicesVal][_citysVal]) {
        area_str += '<option value="' + i + '">' + areas[_provicesVal][_citysVal][i] + '</option>';
      }
      _areas.innerHTML = area_str;
    }
  </script>
</body>

</html>